<template>
  <div>
    <van-sticky :offset-top='50'>
    <van-tabs v-model="active" animated @change="clickNav">
      <!-- 可以左右滚动的导航栏 -->
      <van-tab v-for="item in list" :key="item.id" :title="item.title"></van-tab>
    </van-tabs>
    </van-sticky>
    <!-- 图片列表展示 -->
    <ul class="ulli">
      <li v-for="item in photolist" :key="item.id">
        <van-image lazy-load :src="item.img_url" class="ulli_img" @click='picDetail(item.id)'>
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <div class="ulli_pp">
          <p>{{item.title}}</p>
          <br />
          <p>{{item.zhaiyao}}</p>
        </div>
      </li>
    </ul>
    <van-divider>没有更多了呦</van-divider>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      //   "全部"导航两个字
      all: [
        {
          title: '全 部',
          id: 0
        }
      ],
      //   导航列表
      list: [
        {
          title: '',
          id: ''
        }
      ],
      //   图片列表
      photolist: [
        {
          id: '',
          img_url: '',
          title: '',
          zhaiyao: ''
        }
      ],
      //   当前导航标题的id
      lid: 0,
      loading: false,
      finished: false
    }
  },
  created () {
    this.getNavy()
    this.getPhoto(0)
  },
  methods: {
    //   获取图片导航list
    async getNavy () {
      const { data: res } = await this.$http.get('/api/getimgcategory')
      if (res.status !== 0) {
        return this.$toast('请求出现错误')
      }
      //   console.log(res)
      console.log(res.message)
      res.message.unshift(this.all[0])
      this.list = res.message
      //   console.log(this.list)
    },
    // 获取图片信息
    async getPhoto (lid) {
      const { data: res } = await this.$http.get('/api/getimages/' + this.lid)
      if (res.status !== 0) {
        return this.$toast('请求出现错误')
      }
      //   console.log(res)
      //   console.log(res.message)
      this.photolist = res.message
    },
    // 切换导航栏的时候
    clickNav (i) {
      //   点击导航栏名称 获取对应的id
      this.lid = this.list[i].id
      this.getPhoto(this.lid)
    },
    onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }

        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 1000)
    },
    // 点击图片 显示详情内容
    picDetail (lid) {
    //   点击图片 跳转图片详情页面
      this.$router.push('./info/' + lid)
    //   alert('哈哈')
    }
  }
}
</script>

<style scoped lang="less">
.ulli li {
  position: relative;
  //   top:100px;
  display: block;
  margin: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.ulli_img {
  width: 100%;
  height: 300px;
}
.ulli_pp {
  padding: 10px 12px 10px 12px;
  position: absolute;
  bottom: 5px;
  color: #fff;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>
